<template>
	<view class="page">
		<view class="topVue">
			<!-- 顶部 -->
			<view class="status"></view>
			
			<!-- 搜索 -->
			<view class="searchVue margin20 flex align-center relative">
				<vew class="flex-between align-center flex-1">
					<view class="search" @click="$tools.route('./search')">搜索商品</view>
					<image src="../../static/index/group.png" style="width: 70rpx; height: 70rpx; margin-left: 20rpx;" @click="navigate('./help')"></image>
				</vew>
				<image src="../../static/search.png" style="width: 38rpx; height: 38rpx; left: 50rpx;" class="absolute-middle"></image>
			</view>
			<!-- 轮播图 -->
			<view class="swiperVue">
				<u-swiper :list="swiperList" height="320" name="picUrl"></u-swiper>
			</view>
		</view>

		<view class="box">
			<view class="status"></view>
			<view class="orderTypeVue flex">
				<view class="orderType flex-column align-center" @click="$tools.route('./orderArea')">
					<view class="iconVue">
						<image src="../../static/index/order_1.png"></image>
					</view>
					<text>订单区</text> 
				</view>
				<view class="orderType flex-column align-center" @click="$tools.route('./discountArea')">
					<view class="iconVue">
						<image src="../../static/index/order_2.png"></image>
					</view>
					<text>折扣区</text>
				</view>
				<view class="orderType flex-column align-center" @click="$tools.route('./activityArea')">
					<view class="iconVue">
						<image src="../../static/index/order_3.png"></image>
					</view> 
					<text>活动区</text>
				</view>
				<view class="orderType flex-column align-center" @click="$tools.route('./pointArea')">
					<view class="iconVue">
						<image src="../../static/index/order_4.png"></image>
					</view>
					<text>积分区</text> 
				</view>
				<view class="orderType flex-column align-center" @click="$u.toast('暂未开放')">
					<view class="iconVue relative">
						<image src="../../static/index/order_5.png"></image>
						<image src="../../static/index/new.png" style="width: 44rpx;height: 30rpx; top: 8rpx; right: -8rpx" class="absolute"></image>
					</view>
					<text>品牌加盟</text> 
				</view>
			</view>
			
			<view class="productBox flex">
				<view class="tabVue">
					<view class="tab relative" :class="{active: categoryId===6}" @click="selectFun({id:6}, null)">全部分类
						<image 
							src="../../static/index/bar.png" 
							style="width: 140rpx; height: 30rpx; bottom: 0;"
							class="absolute-center"
							v-if="categoryId===6"
						></image>
					</view>
					<view class="tab relative" :class="{active: categoryId===item.id}" v-for="(item, index) in tabs":key="index" @click="selectFun(item, index)">{{item.name}}
						<image 
							src="../../static/index/bar.png" 
							style="width: 140rpx; height: 30rpx; bottom: 0;"
							class="absolute-center"
							v-if="categoryId===item.id"
						></image>
					</view>
				</view>
				<view class="productVue">
					<view class="flex align-center" style="width: 100%; height: 80rpx;">
						<text style="color: #333; line-height: 1;">热门推荐</text>
						<image src="../../static/index/hot.png" style="width: 32rpx; height: 32rpx; margin-left: 10rpx;"></image>
					</view>
					<scroll-view scroll-y="true" class="scrollVue" @scrolltolower="onReachBot">
						<view class="w100 flex-between flex-wrap">
							<view class="product" v-for="(item, index) in list" :key="index" @click="navigate(`./productDetail_${item.parentCategoryId}`, item.id)">
								<view class="picture">
									<image :src="item.picUrl" style="width: 100%; height: 100%; border-radius: 20rpx 20rpx 0 0;"></image>
								</view>
								<view class="info flex-column flex-between">
									<view class="name line-1">{{item.name}}</view>
									<view class="flex align-center">
										<image src="../../static/green_g.png" style="width: 40rpx; height: 40rpx;" v-if="item.parentCategoryId<4"></image>
										<image src="../../static/point.png" style="width: 40rpx; height: 40rpx;" v-if="item.parentCategoryId==4"></image>
										<text class="newPrice" v-if="item.parentCategoryId==2 || item.parentCategoryId==3">￥</text>
										<text class="newPrice" v-if="item.parentCategoryId<4">{{item.price/100}}</text>
										<text class="oldPrice" v-if="item.parentCategoryId==4">{{item.price/100}}</text>
									</view>
									<view class="sold">已售：{{item.salesCount}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				list: [],
				current: 0,
				tabs: [],
				categoryId: 6,
				pageNum: 1,
				pageSize: 10,
				pages: 0,
				isRefresh: false,
			}
		},
		
		async onLoad() {
			await this.getBannerList()
			await this.getCategroyList()
		},
		
		async onPullDownRefresh() {
			this.isRefresh = true
			uni.startPullDownRefresh()
			await this.getBannerList()
			await this.getCategroyList()
		},
	
		methods: {
			// 登录校验跳转
			navigate(path, value){
				if(!this.$store.state.isLogin) return this.$tools.route("../login/login")
				uni.navigateTo({
					url: path + "?value=" + value
				})
			},
			
			// 轮播图
			async getBannerList(){ 
				const result = await this.$request("/app-api/promotion/banner/list", "GET", {
					position: 1
				})
				console.log(result)
				if(result.code===0) this.swiperList = result.data
				console.log("轮播图", this.swiperList)
			},
			
			async getCategroyList(){
				// 订单区 1  折扣去 2  活动区 3  积分区 4  热门区 6
				const result = await this.$request("/app-api/product/category/list-second", "GET", { parentId: 6 })
				if(result.code===0) {
					this.tabs = result.data
					console.log("热门商品分类", this.tabs)
					this.list = []
					this.pageNum = 1
					this.getList()
				}
			},
			
			// 获取商品列表
			async getList(){
				console.log(this.categoryId)
				const result = await this.$request("/app-api/product/spu/popular/page", "GET", {
					categoryId: this.categoryId,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				})
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize) 
					if(this.isRefresh) this.isRefresh = false
					console.log("获取商品列表", this.list)
					console.log("商品总页数", this.pages)
				}
			},
			
			// 切换商品分类
			selectFun(item, index){
				if(this.categoryId===item.id) return
				this.categoryId = item.id
				this.list = []
				this.pageNum = 1
				this.getList()
			},
			
			// 分页刷新
			async onReachBot(){
				console.log("噢噢噢噢")
				if(this.pageNum===this.pages) return
				this.pageNum ++
				await this.getList()
			},
		}
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		height: calc(var(--status-bar-height) + 110rpx + 340rpx);
		background: url("../../static/index/bg.png") no-repeat;
		background-size: 100% 100%;
		.searchVue {
			width: 100%;
			height: 90rpx;
			padding: 0 30rpx;
			.search {
				flex: 1;
				height: 70rpx;
				background: #f5f5f5;
				border-radius: 36rpx;
				color: #999;
				font-size: 28rpx;
				padding-left: 64rpx;
				line-height: 70rpx;
			}
		}
		.swiperVue {
			width: 100%;
			padding: 20rpx 30rpx 0;
		}
	}

	.box {
		width: 100vw;
		height: 100vh;
		.orderTypeVue {
			width: 100%;
			height: 186rpx;
			padding: 0rpx 30rpx 50rpx;
			.orderType {
				width: 20%;
				.iconVue {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				text {
					color: #4B5563;
					line-height: 1;
				}
			}
		}
		.productBox {
			width: 100vw;
			height: calc(100vh - var(--status-bar-height) - 186rpx);
			.tabVue {
				width: 200rpx;
				height: calc(100vh - var(--status-bar-height) - 186rpx);
				background: #F5FBF7;
				margin-right: 20rpx;
				.tab {
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #7A7B7B;
					font-size: 30rpx;
				}
				.active {
					color: #000;
					font-weight: 600;
					background: #fff;
				}
			}
			.productVue {
				flex: 1;
				height: calc(100vh - var(--status-bar-height) - 186rpx);
				padding-right: 30rpx;
				.scrollVue {
					width: 100%;
					height: calc(100vh - var(--status-bar-height) - 186rpx - 80rpx);
					box-sizing: border-box;
					.product {
						width: 240rpx;
						height: 390rpx;
						margin-bottom: 26rpx;
						background: #fff;
						border-radius: 20rpx;
						box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
						.picture {
							width: 240rpx;
							height: 240rpx;
							border-radius: 20rpx 20rpx 0 0;
						}
						.info {
							width: 100%;
							height: 150rpx;
							padding: 15rpx;
							.name {
								color: #333;
								font-weight: 600;
								line-height: 1;
								font-size: 26rpx;
							}
							.newPrice {
								color: #1CC289;
								font-weight: 600;
								line-height: 1;
								font-size: 26rpx
							}
							.oldPrice {
								color: #666;
								line-height: 1;
								padding-left: 20rpx;
								font-size: 26rpx
							}
							.sold {
								color: #4B5563;
								line-height: 1;
								font-size: 24rpx
							}
						}
					}
				}
			}
		}
	}



</style>
